<template>
  <div class="app-container">
    <div class="top">
      <div>
        <img src="../assets/images/deviceInfoTitle.png" alt="" />
      </div>
      <div>备件信息</div>
    </div>
    <div class="tops">
      <div v-for="(value, index) in lists" :key="index" class="list">
        <div class="list_left">
          <div>{{ value.name }}</div>
          <div>
            <span :class="{ 'warning-item': value.isWarning }">{{
              value.num
            }}</span>
            <span>{{ value.unit }}</span>
          </div>
        </div>
        <div class="list_right">
          <img :src="value.imgs" alt="" />
        </div>
      </div>
    </div>
    <div class="container">
      <div class="search">
   
        <el-button type="primary" size="mini" @click="goAdds" v-hasPermi="['deviceIn:deviceIn:add']">新增备件</el-button>
        <div>
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
          >
            <el-form-item label="备件名称" prop="partName">
              <el-input
                v-model="queryParams.partName"
                placeholder="请输入"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="备件编号" prop="partCode">
              <el-input
                v-model="queryParams.partCode"
                placeholder="请输入"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status">
                <el-option
                  v-for="value in ststusList"
                  :value="value.id"
                  :key="value.id"
                  :label="value.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="handleQuery"
                >查询</el-button
              >
              <el-button size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="table-container">
        <el-table v-loading="loading" :data="userList">
          <el-table-column
            label="备件名称"
            align="center"
            prop="partName"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div class="specialTitle">{{ scope.row.partName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="备件编号"
            min-width="120"
            align="center"
            prop="partCode"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="规格型号"
            min-width="140"
            align="center"
            prop="specModel"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="单位"
            align="center"
            min-width="80"
            prop="unit"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="安全库存"
            align="center"
            prop="safeStock"
            min-width="80"
          />
          <el-table-column
            label="实际库存"
            align="center"
            prop="realStock"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="库存缺口"
            align="center"
            prop="stockGap"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="单价/元"
            align="center"
            prop="unitPrice"
            :show-overflow-tooltip="true"
          />
                 <el-table-column
            label="总价/元"
            align="center"
            prop="totalPrice"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="厂家"
            align="center"
            prop="manufacturer"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="仓库名称"
            align="center"
            prop="warehouseName"
            :show-overflow-tooltip="true"
          />
   
          <el-table-column
            label="状态"
            align="center"
            prop="status"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0" style="color: green">正常</div>
              <div v-if="scope.row.status == 1" style="color: red">缺货</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="130"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['deviceInfo:deviceInfo:view']"
                size="mini"
                type="text"
                @click="handleView(scope.row)"
                >查看</el-button
              >
              <el-button
                v-hasPermi="['deviceInfo:deviceInfo:edit']"
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
                >编辑</el-button
              >
              <!-- <el-button size="mini" type="text" @click="handleUpdate(scope.row)">转移</el-button> -->
              <el-button
                v-hasPermi="['deviceInfo:deviceInfo:delete']"
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog
      title="编辑备件信息"
      :visible.sync="open"
      width="700px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="厂家" prop="manufacturer">
          <el-input
            v-model="form.manufacturer"
            placeholder="请输入"
            style="width: 240px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="安全库存" prop="safeStock">
          <el-input-number
            style="width: 240px"
            :controls="false"
            v-model="form.safeStock"
            :step="1"
            step-strictly
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="详情"
      :visible.sync="openView"
      width="1200px"
      append-to-body
    >
      <div style="height: 70vh; overflow-y: auto">
        <div class="summary-card" ref="summaryCard">
          <div class="summary-row">
            <div class="summary-item">
              <span class="label">备件名称：</span>
              <span class="value">{{ stockInFo.partName }} </span>
            </div>
            <div class="summary-item">
              <span class="label">备件编号：</span>
              <span class="value">{{ stockInFo.partCode || "-" }}</span>
            </div>
            <div class="summary-item">
              <span class="label">规格型号：</span>
              <span class="value">{{ stockInFo.specModel }} </span>
            </div>
          </div>
          <div class="summary-row">
            <div class="summary-item">
              <span class="label">仓库编号：</span>
              <span class="value">{{ stockInFo.warehouseCode || "-" }}</span>
            </div>
            <div class="summary-item">
              <span class="label">仓库名称：</span>
              <span class="value">{{ stockInFo.warehouseName || "-" }}</span>
            </div>
            <div class="summary-item">
              <span class="label">单位：</span>
              <span class="value">{{ stockInFo.unit || "-" }}</span>
            </div>
          </div>
          <div class="summary-row">
            <div class="summary-item">
              <span class="label">安全库存：</span>
              <span class="value">{{ stockInFo.safeStock || "-" }}</span>
            </div>
            <div class="summary-item">
              <span class="label">实际库存：</span>
              <span class="value">{{ stockInFo.realStock || "-" }}</span>
            </div>
            <div class="summary-item">
              <span class="label">单价/元：</span>
              <span class="value">{{ stockInFo.unitPrice || "-" }}</span>
            </div>
          </div>
        </div>
        <div class="inTitle">入库明细</div>
        <el-table
          max-height="400"
          stripe
          :data="stockInFo.stockInDetails"
          style="width: 100%"
          ref="previewTable"
        >
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column
            label="入库单号"
            prop="orderNo"
            align="center"
          ></el-table-column>
          <el-table-column
            label="入库日期"
            prop="inDate"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            label="入库人"
            prop="inUserName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="备件名称"
            prop="partName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="编码"
            prop="partCode"
            align="center"
          ></el-table-column>
          <el-table-column
            label="型号"
            prop="specModel"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            label="单位"
            prop="unit"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="数量" align="center" prop="quantity"   width="80">
            <template slot-scope="scope">{{
              Number(scope.row.quantity)
            }}</template>
          </el-table-column>
          <el-table-column label="单价/元" align="center"   width="80">
            <template slot-scope="scope">{{
              Number(scope.row.unitPrice)
            }}</template>
          </el-table-column>

          <el-table-column label="总价/元" align="center">
            <template slot-scope="scope">
              {{
                Number(scope.row.unitPrice || 0) *
                Number(scope.row.quantity || 0)
              }}
            </template>
          </el-table-column>
        </el-table>
        <div class="inTitle">出库明细</div>
        <el-table
          stripe
          max-height="400"
          :data="stockInFo.stockOutDetails"
          style="width: 100%"
          ref="previewTable"
        >
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
            <el-table-column
            label="出库单号"
            prop="orderNo"
            align="center"
          ></el-table-column>
          <el-table-column
            label="领用日期"
            width="160"
            prop="outDate"
            align="center"
          ></el-table-column>
          <el-table-column
            label="领用人"
            prop="receiverName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="备件名称"
            prop="partName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="编码"
            prop="partCode"
            align="center"
          ></el-table-column>
          <el-table-column
            label="型号"
             width="160"
            prop="specModel"
            align="center"
          ></el-table-column>
          <el-table-column
            label="单位"
            prop="unit"
            align="center"
              width="60"
          ></el-table-column>
          <el-table-column label="数量" align="center" prop="quantity"   width="80">
            <template slot-scope="scope">{{
              Number(scope.row.quantity)
            }}</template>
          </el-table-column>
          <el-table-column label="单价/元" align="center"   width="80">
            <template slot-scope="scope">{{
              Number(scope.row.unitPrice)
            }}</template>
          </el-table-column>

          <el-table-column label="总价/元" align="center">
            <template slot-scope="scope">
              {{
                Number(scope.row.unitPrice || 0) *
                Number(scope.row.quantity || 0)
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bjzs from "../assets/images/bjzs.png";
import bjze from "../assets/images/bjze.png";
import bjqk from "../assets/images/bjqk.png";
import bjqkze from "../assets/images/bjqkze.png";
import { warehouseLists } from "@/api/select.js";
import {
  listpart,
  getpart,
  updatepart,
  delpart,
  totalAmount,
  totalCount,
  totalGap,
  totalGapAmount,
} from "@/api/deviceInfo.js";
export default {
  name: "deviceInfo",
  data() {
    return {
      openView: false,
      stockInFo: {},
      warehouseData: [],
      open: false,
      form: {},
      // 表单校验
      rules: {
        manufacturer: [
          { required: true, message: "厂家不能为空", trigger: "blur" },
        ],
        safeStock: [
          { required: true, message: "安全库存不能为空", trigger: "blur" },
        ],
      },
      ststusList: [
        {
          id: 0,
          name: "正常",
        },
        {
          id: 1,
          name: "缺货",
        },
      ],
      userList: [],
      loading: false,
      total: 11,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        partName: undefined,
        partCode: undefined,
        status: undefined,
      },
      lists: [
        {
          name: "备件种类",
          num: 100,
          unit: "台",
          imgs: bjzs,
          isWarning: false,
        },
        {
          name: "备件总额",
          num: 100,
          unit: "万元",
          imgs: bjze,
          isWarning: false,
        },
        {
          name: "备件缺口",
          num: 100,
          unit: "台",
          imgs: bjqk,
          isWarning: true,
        },
        {
          name: "备件缺口总额",
          num: 100,
          unit: "万元",
          imgs: bjqkze,
          isWarning: true,
        },
      ],
    };
  },
  created() {
    this.loadWarehouseData();
    this.getList();
    totalAmount().then((res) => {
      this.lists[1].num = res.data;
    });
    totalCount().then((res) => {
      this.lists[0].num = res.data;
    });
    totalGap().then((res) => {
      this.lists[2].num = res.data;
    });
    totalGapAmount().then((res) => {
      this.lists[3].num = res.data;
    });
  },
  methods: {
    goAdds(){
        this.$router.push({
                path: '/addDeviceIn/index',
                query: {
                    type: 'add'
                }
            })
    },
    handleView(row) {
      getpart(row.partId).then((res) => {
        this.stockInFo = res.data;
        this.openView = true;
      });
    },
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updatepart(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    handleUpdate(row) {
      getpart(row.partId).then((res) => {
        this.form = res.data;
        this.open = true;
      });
    },
    loadWarehouseData() {
      warehouseLists()
        .then((res) => {
          this.warehouseData = res.rows || [];
        })
        .catch((err) => {
          this.$message.error("加载仓库数据失败");
          console.error(err);
        });
    },
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除此数据项？")
        .then(function () {
          return delpart(row.partId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listpart(this.queryParams).then((response) => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        configId: undefined,
        configName: undefined,
        configKey: undefined,
        configValue: undefined,
        configType: "Y",
        remark: undefined,
      };
      this.resetForm("form");
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style scoped lang="scss">
.specialTitle {
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  color: #41a772;
}

.summary-card {
  width: 100%;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 16px;
}

.summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 100px;
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.summary-item {
  display: flex;
  align-items: center;
  min-width: 200px;

  .label {
    color: #4e5969;
    font-size: 14px;
    margin-right: 8px;
  }

  .value {
    color: #1d2129;
    font-weight: 500;
    font-size: 14px;
  }
}

.inTitle {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #1d252f;
  margin: 10px 0;
}

.app-container {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 10px;
}

.container {
  width: 100%;
  margin-top: 16px;
  background: #fff;
  padding: 24px 24px 0px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .el-divider {
    margin: 20px 0 !important;
  }

  .search {
    height: 32px;
    line-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    ::v-deep .el-form {
      height: 32px;
      line-height: 32px;
      margin: 0;
      padding: 0;
    }

    ::v-deep .el-input {
      width: 160px;
      height: 32px;
      line-height: 32px;
    }

    ::v-deep .el-form-item__label {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      letter-spacing: 0%;
      vertical-align: middle;
      color: #313d4b;
    }
  }

  .table-container {
    flex: 1;
    overflow: auto;
  }
}

.top {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  padding: 0 16px;

  > div:first-child {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; // 新增

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: relative;
      top: 2px; // 微调图片垂直位置
    }
  }

  > div:last-child {
    font-family: PingFang SC;
    margin-left: 8px;
    font-weight: 500;
    font-size: 18px;
    color: rgba(29, 33, 41, 1);
    line-height: 24px;
    height: 24px;
    display: flex;
    align-items: center;
  }
}

.tops {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;

  .list {
    background: #fff;
    width: 25%;
    height: 92px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .list_right {
      width: 52px;
      height: 52px;
      margin-right: 39px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .list_left {
      margin-left: 49px;

      > div:first-child {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0%;
        color: rgba(0, 0, 0, 0.6);
      }

      > div:last-child {
        font-family: PingFang SC;
        letter-spacing: 0%;

        > span:first-child {
          font-weight: 500;
          font-size: 24px;
          color: rgba(29, 37, 47, 1);
        }

        > span:last-child {
          font-weight: 400;
          font-size: 14px;
          margin-left: 4px;
          color: rgba(0, 0, 0, 0.35);
        }
      }
    }
  }
}

.warning-item {
  color: #ff666a !important;
  /* Element UI的danger颜色 */
}
</style>
